<template>
  <div class="account-info">
    <h5 class="account-title">企业信息</h5>
    <el-divider />
    <el-form :model="accountInfo" ref="ruleFormRef" :rules="rules" label-width="120px">
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="企业名称" prop="accountName">
            <el-input v-model.trim="accountInfo.accountName" disabled />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="12"
          ><el-form-item label="企业账号"> <el-input v-model.trim="accountInfo.accountNum" disabled /></el-form-item
        ></el-col>
        <el-col :span="12"
          ><el-form-item label="App验证码"> <el-input v-model.trim="accountInfo.appNum" disabled /> </el-form-item
        ></el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="12"
          ><el-form-item label="联系人"> <el-input v-model.trim="accountInfo.contactName" disabled /></el-form-item
        ></el-col>
        <el-col :span="12"
          ><el-form-item label="联系电话"> <el-input v-model.trim="accountInfo.contactPhone" disabled /></el-form-item
        ></el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="12"
          ><el-form-item label="联系邮箱"> <el-input v-model.trim="accountInfo.contactEmail" disabled /></el-form-item
        ></el-col>
      </el-row>
    </el-form>
    <h5 class="account-logo">企业LOGO</h5>
    <span class="logo-tip">上传的logo保存后将替换当前系统左上角的企业logo</span>
    <el-divider />
    <div class="logo-config">
      <div class="logo-preview">
        <span>工作台LOGO</span>
        <img src="@common/assets/logo.png" alt="" />
      </div>
      <div class="logo-upload">
        <el-upload
          v-model="fileList"
          class="upload-demo"
          action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"
          multiple
          :on-preview="handlePreview"
          :on-remove="handleRemove"
          :before-remove="beforeRemove"
          :limit="3"
          :on-exceed="handleExceed"
        >
          <template #trigger>
            <el-button type="primary">上传文件</el-button>
          </template>
          <el-button type="text" style="margin-left: 20px" @click="restoreDefault">恢复默认</el-button>
          <template #tip>
            <div class="el-upload__tip">仅支持png,jpg,jpeg格式的图片,大小在1M以内</div>
          </template>
        </el-upload>
      </div>
    </div>
    <h5 class="account-title">其他设置</h5>
    <el-divider />
    <div class="other-config">
      <div class="config-left">
        <h5>在线咨询、帮助中心悬浮按钮</h5>
        <p>
          开启后可以在页面下方找到对应的功能，关闭则隐藏
          <span>查看指引</span>
        </p>
      </div>
      <div class="config-right">
        <el-switch v-model="configBtn" />
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, reactive, ref } from 'vue'
import type { FormRules } from 'element-plus'
import { ElMessage, ElMessageBox } from 'element-plus'

import type { UploadProps, UploadUserFile } from 'element-plus'
export default defineComponent({
  name: 'accountInfo',
  components: {},
  // ----------------生命周期-----------------------
  setup() {
    const accountInfo = reactive({
      accountName: 'Hello',
      accountNum: 'Hello',
      appNum: 'Hello',
      contactName: 'Hello',
      contactPhone: 'Hello',
      contactEmail: 'Hello'
    })
    const configBtn = ref(false)

    const rules = reactive<FormRules>({
      name: [{ required: true, message: '请输入企业名称', trigger: 'blur' }]
    })

    const fileList = ref<UploadUserFile[]>([
      {
        name: 'element-plus-logo.svg',
        url: 'https://element-plus.org/images/element-plus-logo.svg'
      },
      {
        name: 'element-plus-logo2.svg',
        url: 'https://element-plus.org/images/element-plus-logo.svg'
      }
    ])

    const handleRemove: UploadProps['onRemove'] = (file, uploadFiles) => {
      console.log(file, uploadFiles)
    }

    const handlePreview: UploadProps['onPreview'] = (uploadFile) => {
      console.log(uploadFile)
    }

    const handleExceed: UploadProps['onExceed'] = (files, uploadFiles) => {
      ElMessage.warning(
        `The limit is 3, you selected ${files.length} files this time, add up to ${
          files.length + uploadFiles.length
        } totally`
      )
    }

    // 恢复默认
    const restoreDefault = (e: any) => {
      console.log(e, 'eeeeeeeee')
    }

    const beforeRemove: UploadProps['beforeRemove'] = (uploadFile) => {
      return ElMessageBox.confirm(`Cancel the transfert of ${uploadFile.name} ?`).then(
        () => true,
        () => false
      )
    }
    return {
      rules,
      accountInfo,
      fileList,
      configBtn,
      handleRemove,
      handlePreview,
      handleExceed,
      beforeRemove,
      restoreDefault
    }
  }
})
</script>

<style lang="stylus" scoped>
.account-info
  padding 0 20px
  .account-title, .account-logo
    margin 20px 0 0 0
    font-size 16px
    color #b2adad
  .el-divider--horizontal
    margin 20px 0
  .account-logo
    display inline-block
    margin 20px 10px 0 0
  .logo-tip
    font-size 12px
    color #afa9a9
  .logo-preview
    float left
    font-size 12px
    width 200px
    padding-top 20px
    img
      vertical-align middle
      margin-left 20px
      height 20px
  .logo-upload
    display inline-block
    font-size 12px
    margin-left 20px
  .other-config
    width 600px
    height 70px
    border 1px solid #ccc
    .config-left
      float left
      font-size 12px
      padding 15px
      h5
        margin 0
    .config-right
      float right
      padding 15px 20px
</style>
